<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="chart">
    <div style="margin-left: 15px; font-size: 1rem">要素库数据资产统计</div>
    <div class="sub-chart">
      <div id="pieChart" class="pie-chart">
        <div
          v-if="showNoData"
          style="
            width: 100%;
            height: 90%;
            font-size: 1rem;
            color: #999;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          暂无统计数据
        </div>
      </div>
      <div class="chart-middle"></div>
      <div id="barChart" class="bar-chart">
        <div
          v-if="showNoData"
          style="
            width: 100%;
            height: 90%;
            font-size: 1rem;
            color: #999;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          暂无统计数据
        </div>
      </div>
    </div>
    <div
      v-if="true"
      style="
        width: 100%;
        height: 90%;
        font-size: 1.3rem;
        color: #999;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      暂无统计数据
    </div>
  </div>
</template>

<script setup>
import * as VTable from '@visactor/vtable';
import VChart from '@visactor/vchart';
import { watch, onBeforeUnmount, onMounted } from 'vue';
const showNoData = ref(true);
const props = defineProps(['pieData', 'barData', 'total']);
VTable.register.chartModule('vchart', VChart);

const CONTAINER_ID = 'pieChart';
const CONTAINER_BAR_ID = 'barChart';

let vchartInstance = null;
let vbarInstance = null;

watch(
  () => [props.pieData, props.barData, props.total],
  ([newPie, newBar, newTotal]) => {
    // 销毁旧实例
    if (vchartInstance) {
      vchartInstance.release();
    }
    if (vbarInstance) {
      vbarInstance.release();
    }
    if (newPie?.length && newBar?.length && newTotal) {
      // 重新初始化图表
      initRadar(newPie, newTotal);
      initBarRadar(newBar);
      showNoData.value = false;
    } else {
      showNoData.value = true;
    }
  },
  { deep: true, immediate: true }
);

onBeforeUnmount(() => {
  vchartInstance?.release();
  vbarInstance?.release();
});

const initRadar = (params, total) => {
  const spec = {
    type: 'pie',
    title: {
      visible: true
    },
    data: [
      {
        id: 'id0',
        values: params
      }
    ],
    outerRadius: 0.7,
    innerRadius: 0.5,
    padAngle: 0.7,
    valueField: 'count',
    categoryField: 'name',
    pie: {
      style: {
        cornerRadius: 10
      },
      state: {
        hover: {
          outerRadius: 0.6,
          stroke: '#000',
          lineWidth: 1
        },
        selected: {
          outerRadius: 0.6,
          stroke: '#000',
          lineWidth: 1
        }
      }
    },
    indicator: {
      id: 'indicator',
      visible: true,
      fixed: true,
      content: [
        {
          visible: true,
          style: {
            fontSize: 8,
            text: `总计:${total}`
          }
        }
      ]
    },
    legends: {
      visible: true,
      orient: 'left',
      item: {
        icon: 'circle',
        label: {
          style: {
            fontSize: 8 // 直接设置字体大小（数字类型，单位 px）
          }
        }
      }
    },
    label: {
      visible: true,
      style: {
        fontSize: 8
      },
      layout: {
        overlap: {
          hideOnOverlap: false
        }
      }
    }
  };

  const vchart = new VChart(spec, { dom: CONTAINER_ID });
  vchart.renderSync();
  vchartInstance = vchart;
};

const initBarRadar = (params) => {
  const processedParams = params.map((item) => {
    if (item.count > 100000) {
      return {
        ...item,
        count: item.count + '',
        countLabel: (item.count / 10000).toFixed(2) + 'w'
      };
    }
    return {
      ...item,
      count: item.count + '',
      countLabel: item.count + ''
    };
  });
  const spec = {
    type: 'bar',
    direction: 'horizontal',
    data: [
      {
        id: 'id2',
        values: processedParams
      }
    ],
    xField: 'count',
    yField: 'name',
    seriesField: 'name',
    padding: { right: 90, left: 10 },
    axes: [
      {
        orient: 'bottom',
        visible: false,
        nice: false
      },
      {
        orient: 'left',
        maxWidth: 55,
        label: {
          autoLimit: true
        },
        domainLine: {
          visible: false
        },
        tick: {
          visible: false
        }
      }
    ],
    stackCornerRadius: 0,
    bar: {
      style: {
        cornerRadius: [5, 5, 5, 5],
        height: 10
      }
    },
    barBackground: {
      visible: true,
      style: {
        cornerRadius: [5, 5, 5, 5],
        height: 10
      },
      state: {
        hover: {
          stroke: '#D9D9D9',
          lineWidth: 1
        }
      }
    },
    extensionMark: [
      {
        type: 'text',
        dataId: 'id2',
        visible: true,
        style: {
          text: (datum) => datum.countLabel,
          fontSize: 12,
          x: (datum, ctx) => {
            return ctx.getRegion().getLayoutRect().width + 10;
          },
          y: (datum, ctx) => {
            return ctx.valueToY([datum.name]) + ctx.yBandwidth() / 2;
          },
          textBaseline: 'middle',
          textAlign: 'left',
          fill: '#595959',
          size: 20
        }
      }
    ],
    tooltip: {
      style: {
        shape: {
          shapeType: 'circle'
        }
      }
    }
  };

  const vchart = new VChart(spec, { dom: CONTAINER_BAR_ID });
  vchart.renderSync();
  vbarInstance = vchart;
};
</script>

<style lang="scss" scoped>
.chart {
  background: rgba(255, 255, 255, 1);
  box-shadow: 4px 4px 10px rgba(218, 218, 218, 0.5);
  border-radius: 5px;
  width: 100%;
  height: 100%;
  padding: 10px;
  .sub-chart {
    width: 100%;
    height: 95%;
    display: flex;
    justify-content: space-between;
    .pie-chart {
      width: 60%;
      height: 90%;
    }
    .chart-middle {
      width: 1px solid #cccccc;
      height: 90%;
      border-right: 1px solid #cccccc;
    }
    .bar-chart {
      width: 40%;
      height: 90%;
    }
  }
}
</style>
